<template>
	<view v-if="chat_flag == 1">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">聊天</block></cu-custom>
		<view class="cu-chat">
			<view class="cu-item self">
				<view class="main">
					<view class="content bg-green shadow">
						<text>{{friendApply.message}}</text>
					</view>
				</view>
				<u-avatar @click="chat(friendApply.applyUserId)" :src="friendApply.applyAvatar"></u-avatar>
				<view class="date">{{friendApply.createTime}}</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view @click="copyText(friendApply.wechat)" class="content bg-green shadow">
						<text>微信号：{{friendApply.wechat}}</text>
					</view>
				</view>
				<u-avatar @click="chat(friendApply.applyUserId)" :src="friendApply.applyAvatar"></u-avatar>
				<view class="date">{{friendApply.createTime}}</view>
			</view>
			<view class="cu-info">
				对方开启了好友验证，你还不是他(她)的好友。请等待对方验证通过后，才能聊天。
			</view>
			<view class="cu-info round" v-if="friendApply.status == '0' && friendApply.rankNum > 10">您在对方申请列表第<text class="rank">{{friendApply.rankNum}}</text>名!</view>
			<view class="cu-info" v-if="friendApply.status == '0' && friendApply.rankNum > 10">
				您在他(她)的好友申请列表排名越靠前，越容易被她发现。
				<text class="text-blue" @click="show = true">我要升级排名</text>
				<text class="text-line">|</text>
				<text class="text-blue" @click="rule = true">查看排名规则</text>
			</view>
			<view class="cu-item" v-if="friendApply.unRead == '1'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>已查看你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '1'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>已通过你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '2'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view class="content shadow">
						<text>拒绝了你的好友申请！</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-item" v-if="friendApply.status == '1'">
				<u-avatar @click="chat(friendApply.userId)" :src="friendApply.avatar"></u-avatar>
				<view class="main">
					<view @click="copyText(friendApply.contact)" class="content shadow">
						<text>微信号：{{friendApply.contact}}</text>
					</view>
				</view>
				<view class="date ">{{friendApply.updateTime}}</view>
			</view>
			<view class="cu-info" v-if="friendApply.status == '1'">
				交友需谨慎，请勿涉及金钱交易，如果对方提供假的联系方式，或者存在欺诈。
				<text class="text-blue">我要举报</text>
			</view>
		</view>

		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" v-model="message" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="send">发送</button>
		</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<apply :dataList="friendApply.applyList"></apply>
				</scroll-view>
				<view class="confrim-btn">
					<u-button size="medium" @click="show = false;">取消</u-button>
					<u-button size="medium" type="primary" @click="hotShow = true;">升级</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="rule" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<rule></rule>
				</scroll-view>
				<view class="confrim-btn">
					<u-button @click="rule = false;">关闭</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="chongShow" mode="bottom" border-radius="14">
			<add-coin :slider="chongShow" @getAmount="getAmount" :applyId="applyId" @chong="showChong = true" @cannel="chongShow = false"></add-coin>
		</u-popup>

		<u-modal v-model="showChong" show-cancel-button="true" @confirm="chongShow = true" content="趣豆不足,需要充值吗"></u-modal>
	</view>
</template>

<script>
	import apply from "@/pages/index/apply.vue";	//申请排名
	import addCoin from "@/pages/index/addCoin.vue";	//充值
	import rule from "@/pages/index/rule.vue";	//申请规则
	export default {
		components: {
			addCoin,
			apply,
			rule
		},
		data() {
			return {
				amount: 0,
				applyId: 0,
				chongShow: false,
				showChong: false,
				show: false,
				hotShow: false,
				rule: false,
				friendApply: {
					
				},
				message: '',
				InputBottom: 0
			};
		},
		onLoad(option) {
			this.applyId = option.applyId;
			this.init();
		},
		methods: {
			init() {
				this.$u.get('/wq/friendApply/getDetail',{
					id: this.applyId
				}).then(res => {
					this.friendApply = res.data;
				});
				
				this.getAmount();
			},
			getAmount() {
				this.$u.get('/pay/userCoin/getAmount').then(res => {
					this.amount = res.data;
				});
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			chat(userId) {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: userId,
						}
					});
				});
			},
			copyText(text){
			    uni.setClipboardData({
			        data: text ,
			        success: function (res) {
						console.log('复制的信息：',text );
						uni.showToast({
							 title: '复制成功',
						});
			        }
			    });        
			},
			send() {
				this.judgeLogin((res) => {
					this.subscribeMessage(res.tmplIds);
					
					this.$u.post('/wq/friendApply/add',{
						userId: this.friendApply.userId,
						message: this.message,
					}).then(res => {
						this.init();
					});
				});
			},
			subscribeMessage(tmplIds) {
				uni.requestSubscribeMessage({
					//数组，最多放三个订阅模板的ID
					tmplIds: tmplIds,
					success: function(res) {
						console.log(JSON.stringify(res));
					},
					fail: function() {
			
					},
					complete: (res) => {
						console.log(333,res)
					}
				});
			},
			confirm() {
				
			},
		}
	}
</script>

<style>
page{
	background-color: #f1f1f1;
	padding-bottom: 100upx;
}
.text-line {
	padding: 0 5px;
}
.confrim-btn {
	padding: 15px;
	display: flex;
	justify-content: space-between;
}
.rank {
	color: #0081ff;
	font-weight: bolder;
	padding: 0 3px;
}
</style>
